<script setup>
import { ref } from 'vue';


let inputContent = ref("")
function keywordEventHandler(event) {
    // console.log(event);
    // 事件所在元素的 value
    console.log(event.target.value);
    inputContent.value = event.target.value
}

// 按键回车的时候无法得到
// function keywordEventHandler(event) {
//     // console.log(event);
//     // 事件所在元素的 value
//     // console.log(event.target.value);
//     // inputContent.value = event.target.value

//     let content = event.target.value
//     console.log(content.charAt(content.length - 1));

// }

</script>

<template>
    <h2>{{ inputContent }}</h2>
    <label for="keyword">
        请输入要搜索内容
        <input type="text" name="keyword" id="keyword" placeholder="请输入要搜索内容" v-on:input="keywordEventHandler($event)">
    </label>
    <br>    
    <label for="keyword">
        请输入要搜索内容
        <!-- 直到按下回车键的时候才起作用 -->
        <input type="text" name="keyword" id="keyword" placeholder="请输入要搜索内容" v-on:keyup.enter="keywordEventHandler($event)">
    </label>
</template>

<style scoped></style>